<template>
  <div class="radio-container">
    <div
      style="margin-bottom: 30px"
      class="radio-info"
      v-for="(item, index) in this.res.options"
      :key="index"
    >
      <div
        class="top"
        style="
          display: flex;
          justify-content: space-around;
          align-items: center;
        "
      >
        <div class="radio-title">{{ item.label }}</div>
        <div class="radio-ans">{{ item.value }}</div>
      </div>

      <el-progress
        :percentage="percent(item.value)"
        v-if="(countList[item.value] / count) * 100"
      ></el-progress>
    </div>
    <el-tabs :tab-position="'right'" style="height: 200px">
      <el-tab-pane label="饼图">
        <div
          id="charts-pie"
          style="width: 400px; height: 300px; margin-right: 40px"
        ></div>
      </el-tab-pane>
      <el-tab-pane label="折线图">
        <div
          id="charts-line"
          style="width: 400px; height: 300px; margin-right: 40px"
        ></div>
      </el-tab-pane>
      <el-tab-pane label="柱状图">
        <div
          id="charts-bar"
          style="width: 400px; height: 300px; margin-right: 40px"
        ></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getQuestionCount, getQuestionList } from '@/api/form'
export default {
  name: 'radioWrapper',
  props: {
    res: {
      required: true
    }
  },
  methods: {
    percent(key) {
      console.log(this.countList[key]);
      console.log(this.count);
      return this.countList[key] / this.count * 100
    }
  },
  data() {
    return {
      count: 0,
      countList: [],
      pinlv: [],
      xData: [],
      yData: []
    }
  },
  async mounted() {
    const { data } = await getQuestionCount(this.res.field)
    for (var index in data.data) {
      this.pinlv.push({ 'value': data.data[index], 'name': index })
      this.xData.push(index)
      this.yData.push(data.data[index])
    }

    this.countList = data.data
    console.log('data', this.countList);
    if (data.data) {
      for (const item in data.data) {
        this.count += data.data[item]
      }
    }

    // 基于准备好的dom，初始化echarts实例
    var myChart_pie = this.$echarts.init(document.getElementById('charts-pie'));

    // 指定图表的配置项和数据
    var option_pie = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'verticatl',
        left: 'right',
      },
      grid: {
        left: '200px'
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '80%',
          data: this.pinlv,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart_pie.setOption(option_pie);

    var myChart_line = this.$echarts.init(document.getElementById('charts-line'));

    // 指定图表的配置项和数据
    var option_line = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'verticatl',
        left: 'right',
      },
      grid: {
        left: '200px'
      },
      xAxis: {
        type: 'category',
        data: this.xData
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '访问来源',
          type: 'line',
          radius: '80%',
          data: this.yData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart_line.setOption(option_line);

    var myChart_bar = this.$echarts.init(document.getElementById('charts-bar'));

    // 指定图表的配置项和数据
    var option_bar = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'verticatl',
        left: 'right',
      },
      grid: {
        left: '200px'
      },
      xAxis: {
        type: 'category',
        data: this.xData
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '访问来源',
          type: 'bar',
          radius: '80%',
          data: this.yData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart_bar.setOption(option_bar);
  }
}
</script>

<style scoped>
.el-tabs {
  height: 400px !important;
}
</style>